<template>
  <div id="optionst">
    <top-bar :title="title" v-show="IsTopbar"></top-bar>
    <div class="set_list">
      <div class="upper">
        <div class="title_hd">更换手机号码</div>
      </div>
      <div class="desc">为方便取得联系，需绑定一个常用手机号</div>
      <md-field>
        <md-input-item ref="phone" size="large" type="phone" v-model="userPhone" maxlength="11" placeholder="请输入新的手机号"></md-input-item>
      </md-field>
      <p class="rzBtn" @click="rzBtn">下一步</p>
    </div>
  </div>
</template>
<script>
import '@/assets/svgs/drjc_telephone.svg';
import '@/assets/svgs/yzm_icon.svg';
import '@/assets/svgs/tishi.svg';
import { Tabs, Icon, Field, InputItem, Toast, Codebox, Dialog } from 'mand-mobile';
import TopBar from '@/components/TopBar';
import Loading from '@/components/loading';
import { decryptByDESModeEBC, encryptByDESModeEBC } from '@/common/encrypt';
import Utils from '@/common/pakjUtils';
import http from '@/common/http';
export default {
  components: {
    [Tabs.name]: Tabs,
    [Icon.name]: Icon,
    [TopBar.name]: TopBar,
    [Field.name]: Field,
    [Toast.name]: Toast,
    [Codebox.name]: Codebox,
    [InputItem.name]: InputItem
  },
  data() {
    return {
      title: '更换手机号',
      userPhone: '',
      IsTopbar: true
    };
  },
  created() {
    if (Utils.isApp()) {
      // 判断当前环境是否在app
      this.IsTopbar = false;
    }
  },
  mounted() {
    this.phonechangeFouce();
  },
  methods: {
    // 输入新手机号自动对焦
    phonechangeFouce() {
      this.$nextTick(x => {
        this.$refs.phone.focus();
      });
    },
    // 下一步
    rzBtn() {
      var reg = /^1[23456789]\d{9}$/;
      if (!this.userPhone) {
        Toast({
          content: '请输入手机号',
          duration: 3000,
          hasMask: true
        });
        return false;
      }
      if (!reg.test(this.userPhone)) {
        Toast({
          content: '手机号格式错误',
          duration: 3000,
          hasMask: true
        });
        return false;
      }
      this.getCaptcha();
    },
    getCaptcha(type = '1') {
      let params = {
        type: '5',
        user_phone: this.userPhone,
        code_type: type
      };
      if (this.userPhone && this.userPhone !== '') {
        this.$store.dispatch('getCaptchNew', params).then(result => {
          this.$router.push({
            name: 'ReplaceNewPhoneCaptcha',
            query: {
              newphone: this.userPhone
            }
          });
        });
      } else {
        let self = this;
        Dialog.alert({
          title: 'ERROR',
          content: 'PHONE NUMBER REQUIRED',
          onConfirm: () => {
            self.$router.go(-1);
          }
        });
      }
    },
    startFun(str, frontLen, endLen) {
      var len = str.length - frontLen - endLen;
      var xing = '';
      for (var i = 0; i < len; i++) {
        xing += '*';
      }
      return str.substring(0, frontLen) + xing + str.substring(str.length - endLen);
    }
  }
};
</script>
<style lang="stylus" scoped>
p {
  display: block;
  margin-block-start: 0px;
  margin-block-end: 0px;
  margin-inline-start: 0px;
  margin-inline-end: 0px;
}

#optionst {
  height: 100vh;
}

.set_list {
  padding-top: 20px;
}

.set_text {
  text-align: center;
  margin: 42px 0px;
  font-size: 26px;
  color: #999;
}

.rzBtn {
  height: 98px;
  line-height: 98px;
  font-size: 36px;
  text-align: center;
  background-color: #FF6917;
  color: #fff;
  margin: 140px 20px 0px 20px;
  border-radius: 7px;
}

.get-code-button {
  min-width: 160px;
  height: 48px;
  font-size: 24px;
  margin-right: 90px;
  display: inline-block;
  background-color: #FF6917;
  text-align: center;
  line-height: 48px;
  color: #fff;
  border-radius: 7px;
}

.pwd_text {
  font-size: 24px;
  color: #999;
  margin-left: 30px;
  margin-top: 10px;
}

.upper {
  margin-top: 62px;
  padding-left: 30px;
}

.title_hd {
  font-size: 44px;
  color: #333;
}

.desc {
  margin-bottom: 80px !important;
  font-size: 24px;
  color: #999;
  padding-left: 30px;
  padding-top: 10px;
}

.yzm_code_text {
  font-size: 24px;
  color: #999;
  margin-top: 10px;
  padding-left: 90px;
}

.upper_one {
  margin-top: 62px;
  padding-left: 90px;
}

.desc_one {
  margin-bottom: 80px !important;
  font-size: 24px;
  color: #999;
  padding-left: 90px;
  padding-top: 10px;
}

.desc_one span {
  color: color-primary;
}
</style>
